<template>
    <viewer :images="dataimg" style="display:flex;">
        <div v-for="(item,index) in dataimg" :key="index" class="grid-content"
             :v-if="dataimg!=null && dataimg.length!=0">
            <el-card>
                <img style="height: 300px;object-fit: cover" :src="item">
                <div style="font-weight: 400;font-size: 14px;text-align: center">{{index+1}}</div>
            </el-card>
        </div>
    </viewer>
</template>

<script>
    export default {
        name: "ImgsDialog",
        data() {
            return {
                dataimg: []
            }
        },
        props: {
            imgsPath: {
                type: String,
                dafult: ''
            }
        },
        mounted() {
            if (this.imgsPath !== '') {
                this.dataimg = this.getPath(this.imgsPath)
            }
        },
        methods: {
            getPath(imgsPath) {
                let srcPath = 'http://61.150.40.169:4377/demo/';
                let dataImg = [];
                if (imgsPath !== undefined && imgsPath !== null && imgsPath !== 'null') {
                    let i = imgsPath.split(',');
                    i.forEach((item) => {
                            dataImg.push(srcPath + item)
                        }
                    )
                }
                return dataImg;
            }
        }
    }
</script>
<style>
    .viewer-next {
        /*display: none !important;*/
    }

    .viewer-prev {
        /*display: none !important;*/
    }
</style>
<style scoped>
    .grid-content {
        /*width: 100% !important;*/
    }
</style>
